<template>
  <div class="view-collapse">
    <fx-card title="基础用法">
      <fx-collapse v-model="baseActive">
        <fx-collapse-item v-for="item in collapseList" :key="item.value" :title="item.value" :name="item.value">
          <p>{{ item.role }}</p>
          <p>{{ item.introduction }}</p>
        </fx-collapse-item>
      </fx-collapse>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="手风琴">
      <fx-collapse v-model="onlyActive">
        <fx-collapse-item v-for="item in collapseList" :key="item.value" :title="item.value" :name="item.value">
          <p>{{ item.role }}</p>
          <p>{{ item.introduction }}</p>
        </fx-collapse-item>
      </fx-collapse>
      <template #hide>
        <pre v-highlight="only"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义头部">
      <fx-switch v-model="hideArrow"></fx-switch>
      <fx-collapse v-model="titleActive" :hide-arrow="!hideArrow">
        <fx-collapse-item v-for="item in collapseList" :key="item.value" :name="item.value">
          <template #title>
            <div style="width: 100%;height: 100%;background-color: #eee">{{ item.value }}</div>
          </template>
          <p>{{ item.role }}</p>
          <p>{{ item.introduction }}</p>
        </fx-collapse-item>
      </fx-collapse>
      <template #hide>
        <pre v-highlight="title"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { defaultList, IDefaultListProps } from '@/assets/menuList'

export default defineComponent({
  name: 'viewCollapse',
  setup () {
    const baseActive = ref<string[]>([])
    const onlyActive = ref<string>('')
    const hideArrow = ref<boolean>(true)
    const titleActive = ref<string[]>([])
    const collapseList = ref<IDefaultListProps[]>(defaultList)

    const base = `<fx-collapse v-model="baseActive">
  <fx-collapse-item v-for="item in collapseList" :key="item.value" :title="item.value" :name="item.value">
    <p>{{ item.role }}</p>
    <p>{{ item.introduction }}</p>
  </fx-collapse-item>
</fx-collapse>

export default defineComponent({
  setup () {
    const baseActive = ref<string[]>(['1'])
    const collapseList = ref<IDefaultListProps[]>(defaultList)

    return {
      baseActive,
      collapseList
    }
  }
})`
    const only = `<fx-collapse v-model="baseActive">
  <fx-collapse-item v-for="item in collapseList" :key="item.value" :title="item.value" :name="item.value">
    <p>{{ item.role }}</p>
    <p>{{ item.introduction }}</p>
  </fx-collapse-item>
</fx-collapse>

export default defineComponent({
  setup () {
    const onlyActive = ref<string>('1')
    const collapseList = ref<IDefaultListProps[]>(defaultList)

    return {
      onlyActive,
      collapseList
    }
  }
})`

    const title = `<fx-collapse v-model="baseActive">
  <fx-collapse-item v-for="item in collapseList" :key="item.value" :title="item.value" :name="item.value">
    <p>{{ item.role }}</p>
    <p>{{ item.introduction }}</p>
  </fx-collapse-item>
</fx-collapse>

export default defineComponent({
  setup () {
    const hideArrow = ref<boolean>(true)
    const titleActive = ref<string>('1')
    const collapseList = ref<IDefaultListProps[]>(defaultList)

    return {
      hideArrow,
      titleActive,
      collapseList
    }
  }
})`

    return {
      hideArrow,
      baseActive,
      onlyActive,
      titleActive,
      base,
      only,
      title,
      collapseList
    }
  }
})
</script>

<style scoped lang="scss">
.view-collapse {
  p {
    white-space: pre-wrap;
  }
}
</style>
